<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <!-- Use Chrome Frame in IE -->
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <meta name="description" content="Adjust the height of a 3D Tiles tileset." />
  <meta name="cesium-sandcastle-labels" content="3D Tiles" />
  <title>无人机电站</title>
  <script type="text/javascript" src="../Sandcastle-header.js"></script>
  <script type="text/javascript" src="../../../Build/CesiumUnminified/Cesium.js" nomodule></script>
  <script type="module" src="../load-cesium-es6.js"></script>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css">

  <style>
    .banner {
      position: relative;
      width: 100%;
      height: 1000px;
      background-size: cover;
    }

    .sidebar {
      float: left;
      width: 250px;
      height: 100%;
      background: rgb(29, 64, 73);
      overflow: hidden;
      position: relative;
      top: -880px;
      transition: 0.8s all;
      opacity: 0.5;
    }

    .sidebar ul {
      margin: 0;
      padding: 0;

    }

    .side {
      margin-left: -100px;
    }

    .sidebar ul li {
      list-style: none;
    }

    .sidebar ul li a {
      text-decoration: none;
      color: white;
      height: 80px;
      width: 100%;
      font-size: 40px;
      line-height: 80px;
      text-align: center;
      display: block;
      transition: 0.5s all;
    }

    .sidebar ul li a:hover {
      background: #D8EEF3;
    }
  </style>

</head>

<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
  <style>
    @import url(../templates/bucket.css);

    #toolbar {
      background: rgba(42, 42, 42, 0.8);
      padding: 4px;
      border-radius: 4px;
    }

    #toolbar input {
      vertical-align: middle;
      padding-top: 2px;
      padding-bottom: 2px;
    }
  </style>

  <script>
    function getEquipments() {
      $.get('http://localhost:8080/sku/skuInfo/1', function (res) {

        var rows = [];
        $.each(res.spuAttrList, function (i, item) {
          rows.push('<tr><td>' + item.attrName + '</td><br/><td>' + item.attrValue + '</td></tr>')
        });

        $.each(res.skuAttrList, function (i, item) {
          rows.push('<tr><td>' + item.attrName + '</td><br/><td>' + item.attrValue + '</td></tr>')
        });


        $('#equipList').empty().append(rows.join(''));
      });

    };
  </script>

  <div id="cesiumContainer" class="fullSize"></div>
  <div id="loadingOverlay">
    <h1>初始化中...</h1>
  </div>
  <div id="toolbar">
    <section class="banner"></section>
    <div class="sidebar">
      <table class="table table-bordered table-hover">
        <button onclick="getEquipments()">获取信息</button>
        <br/>
        <thead>
          <tr>
            设备详细信息
          </tr>
        </thead>
        <tbody id="equipList"></tbody>
      </table>
    </div>
  </div>


  <script id="cesium_sandcastle_script">
    window.startup = function (Cesium) {
      "use strict";
      //Sandcastle_Begin
      const viewer = new Cesium.Viewer("cesiumContainer", {
        //上方组件
        //geocoder:false,//搜索组件
        homeButton: false,//首页位置，可跳转到默认视角
        sceneModePicker: false,//场景模式切换（2d,3d)
        baseLayerPicker: false,//图层选择器
        navigationHelpButton: false,//帮助提示（小问号）
        //下方组件
        animation: false,//动画组件
        timeline: false,//时间轴

        //载入地图资产
        terrainProvider: new Cesium.CesiumTerrainProvider({
          url: Cesium.IonResource.fromAssetId(3957),
          requsestVertexNormal: true,
          requestWaterMask: true
        })
      });

      viewer._cesiumWidget._creditContainer.style.display = "none";


      //3D
      viewer.scene.globe.depthTestAgainstTerrain = true;

      const viewModel = {
        height: 0,
      };

      Cesium.knockout.track(viewModel);

      const toolbar = document.getElementById("toolbar");
      Cesium.knockout.applyBindings(viewModel, toolbar);

      const tileset = new Cesium.Cesium3DTileset({
        url: "../../modelB/tileset.json",
      });

      tileset.readyPromise
        .then(function (tileset) {
          viewer.scene.primitives.add(tileset);
          viewer.zoomTo(
            tileset,
            new Cesium.HeadingPitchRange(
              0.0,
              -0.5,
              tileset.boundingSphere.radius * 2.0
            )
          );
        })
        .catch(function (error) {
          console.log(error);
        });

      Cesium.knockout
        .getObservable(viewModel, "height")
        .subscribe(function (height) {
          height = Number(height);
          if (isNaN(height)) {
            return;
          }

          const cartographic = Cesium.Cartographic.fromCartesian(
            tileset.boundingSphere.center
          );
          const surface = Cesium.Cartesian3.fromRadians(
            cartographic.longitude,
            cartographic.latitude,
            0.0
          );
          const offset = Cesium.Cartesian3.fromRadians(
            cartographic.longitude,
            cartographic.latitude,
            height
          );
          const translation = Cesium.Cartesian3.subtract(
            offset,
            surface,
            new Cesium.Cartesian3()
          );
          tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
        });

        const entity = viewer.entities.add({
        id: 'planeLogo1',
        position: new Cesium.Cartesian3.fromDegrees(104.064, 30.582, 500),
        plane: {
          plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),
          dimensions: new Cesium.Cartesian2(400, 300),
          material: "../../img/elecTower.jpeg",
          outline: true,
          outlineColor: Cesium.Color.BLACK,
        },
        description: `<div><img width="100px" height="100px" src="../../img/panda.jpeg"></div>
        <div><h3>Panda</h3>
          <br/>
          <a href="http://sedc.powerchina.cn/" target="_blank">
            <button>Sedc</button>
          </a>
        </div>`
      });
      var res = "我是弹窗";
      var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      handler.setInputAction(function (movement) {
        var pick = viewer.scene.pick(movement.position);
        if (Cesium.defined(pick) && (pick.id.id === 'planeLogo1')) {
          getEquipments();
          alert(res);
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      //Sandcastle_End
      Sandcastle.finishedLoading();
    };
    if (typeof Cesium !== "undefined") {
      window.startupCalled = true;
      window.startup(Cesium);
    }

  </script>
</body>

</html>